Configure Google Offer Properties

Overview

The Google tab of the Wallet Pass Details screen allows you to configure the Wallet Pass properties for Members using Google devices. As you make changes to the configuration, the platform displays a preview render of the pass as it will appear on Google devices.

The Google tab is organized into the following sections, each of which is described below in more detail:

Barcode: Configure the pass's barcode settings
Color & Images: Customize the visual elements of the pass
Front Content: Design the primary view that displays essential information to Members
Details: Provide comprehensive information such as detailed terms and conditions, in addition to the Front Content.
Links: Provide useful links
Settings: Optionally enable pass sharing
Test Preview: Preview the pass functionality for Google devices using a specified test Member

Barcode

The Barcode section is used to configure the barcode that appears on the Mobile Wallet Pass.

Select the Barcode tab.
Set the barcode value using one of the following methods:
- For a fixed number (like a coupon code), type the number directly in the Barcode Value field.
- For personalized values, enter "@" to bring up a menu of available Content Tokens; select the desired Content Token.
- Utilize Liquid templating to display Offer or Offer Response information.
A common use case is to use Liquid templating within the Barcode value to display the unique certificate code assigned to a Member. For example:
Copy
```
{%- for offer_response in offer_responses -%}
{%- if offer_response.processing_status == 'pending' -%}
{{ offer_response.certificate_codes -}}
{%- break -%}
{%- endif -%}
{%- endfor -%}
```
From the Format drop-down menu, select a barcode format:
- QR Code: Best for storing more information
- PDF 417: Common for boarding passes
- Aztec: Efficient space usage
- Code 128: Ideal for numeric data
Optionally, in the Alt Text field, enter alt text for accessibility. As with the Barcode value described above, you can optionally utilize Liquid templating within the Alt Text field to display Offer or Offer Response information.
Click Save Changes.

The preview rendering on the right updates automatically as you make configuration changes.

Color & Images

The Color & Images section is used to customize the visual elements of the pass.

The layout of a Offer Pass on a Google device is as follows:

Under the Google tab, select the Color & Images tab.
The platform allows you to customize the Background color. Choose a color using one of the following methods:
- Enter the desired hex code value.
- Click the color swatch, and select the desired color from the color picker.
The platform allows you to customize the images used for the Program Logo, Hero Image, and Main Image. For each option in the Images sub-section, click Choose File. Browse to and select the desired image file. The platform displays a thumbnail image. Click Upload. For each image, please note the following recommendations:
- Program Logo: Recommended size of 660x660 pixels.This image should be your brand identifier or logo. The use of a Program Logo is optional.
- Hero Image: Recommended size of 1032x336 pixels. This wide-format image appears at the bottom of the Loyalty Card. The use of a Hero Image is optional.
- Main Image: Recommended size of 1860 pixels wide, with variable height. The use of a Main Image is optional.
Click Save Changes.

The preview rendering on the right updates automatically as you make configuration changes.

Note: The preview may not always render images to size. Always use the Test Preview feature to see the final rendering.

Front Content

The front section of your Google Offer serves as the primary interface for Members, displaying essential information at a glance. This section must be carefully configured to ensure optimal visibility and user experience.

The Front Content comprises two optional fields:

Program Name: This text appears near the top of the Pass, and should contain your program’s official name.
Offer Title: Enter a compelling offer for the Offer, or use a dynamic value populated by means of a Content Token.

To configure the Front Content:

Under the Google tab, select the Front Content tab.
In the Program Name field, enter the name of your program.
For the Offer Title field, enter the following:
- Value: Enter either a static value or type “@” to pull up a list of Content Tokens, and select a Content Token. This value represents the main text for this field, and is displayed in a larger font size than the Label.
Click Save Changes.

The preview rendering on the right updates automatically as you make configuration changes.

Here is an example below.

Details

The front of your Google Pass serves as a quick-reference display with limited space, requiring concise, high-impact content. In addition to the Front Content, the Details section offers expanded capabilities, allowing you to include comprehensive information such as detailed terms and conditions, contact information, and web resources for your Members.

The Details section comprises the ability to create additional custom sections:

To configure the Details section:

Under the Google tab, select the Details tab.
To add a new section, click Add New Section.
- From the Type drop-down menu, select the content type:
  - Fixed Text: Used for static content like terms and conditions or privacy policies. Supports HTML formatting for clickable links and text styling.
  - Stores / Locations: Implements location-aware functionality to show relevant store information based on the user's location.
  - Custom: Enables advanced customization through Content Sources (Note: Content Sources must be pre-configured in the Advanced Options section).
- In the Header field, enter a descriptive header for this section.
- In the Template field, either enter simple text content, or define advanced dynamic content using Liquid syntax.
  
  A common use case is to utilize Liquid templating to populate one of the Details sections with the Offer Response expiration date. In the below example, the platform will display the expiration date for an Offer Response that has a Pending Status.
  Copy
```
{%- for offer_response in offer_responses -%}
{%- if offer_response.processing_status == 'pending' -%}
{{ offer_response.usage_end | date: '%b %d, %Y %I:%M %p' -}}
{%- break -%}
{%- endif -%}
{%- endfor -%
```
  The above example will display the expiration date in UTC. The platform does not support the ability to display a date / time value dynamically based on the user’s device. Optionally, you can specify the date / time be displayed in your loyalty program’s main time zone by adding the “timezone” attribute:
  Copy
```
{%- for offer_response in offer_responses -%}
{%- if offer_response.processing_status == 'pending' -%}
{{ offer_response.usage_end | timezone: "America/New_York" | date: '%b %d, %Y %I:%M %p'-}}
{%- break -%}
{%- endif -%}
{%- endfor -%}
```
  Note: For additional help on creating Liquid templates, a Templating Guide link is displayed within the Details tab. This guide provides code samples to support several different use cases, such as displaying the Offer name or description, or a coupon code or expiration date. If using Liquid templating, please be sure your Content Sources and/or Content Tokens are set up, and all Content Sources have been added in the Advanced tab of the Wallet Pass.
  
  Repeat the above steps as needed to add more sections to the Card’s Details section.
Click Save Changes.

Settings

The Settings tab provides essential controls for managing how Members can share and access passes across different devices. These security settings are crucial for maintaining the integrity of your pass distribution system and ensuring appropriate access control.

For Android devices, you can configure pass sharing through three distinct permission levels:

MULTIPLE HOLDERS (Unrestricted Sharing)
- Allows multiple users to access the pass on different devices
- Ideal for promotional passes or general-access memberships
- Provides maximum flexibility for pass distribution
ONE USER ALL DEVICES (Single User, Multiple Devices)
- Restricts pass access to a single user account
- Allows that user to access the pass across all their devices
- Recommended for personal membership passes or loyalty programs
ONE USER ONE DEVICE (Restricted Access) - Not Available
- Intended for use by select Google partners in limited circumstances; please select one of the above levels instead.

To configure the permission settings for your Google Wallet Pass:

Under the Google tab, select the Setting tab.
From the Device and Users Allowed Status drop-down menu, select the desired permission level, as described above.
Click Save Changes.

Test Preview

To properly test your Google Wallet Pass, you need access to a Google device. This method provides the most authentic testing experience.

Prior to the test, you must ensure:

A Member is designated as a “Test Member” on the Member Profile screen

To test this Google Wallet Pass:

Under the Google tab, select the Test Preview tab.
From the Member drop-down menu, choose your desired Test Member (designating a Member as a “Test Member” is available on the Member Profile screen). The platform generates a button to add the Card to Google Wallet.
Click Add to Google Wallet. A confirmation dialog box is displayed; click Add.
An alert is displayed, indicating “This is a mock success. Wallet Pass has been saved to Google Pay.”
Click View to view the Google Wallet Pass contents in a new browser tab.

The Wallet Pass will open in your browser.

Configure Google Offer Properties

Overview

Barcode

Color & Images

Front Content

Details

Links

Settings

Test Preview